<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" href="https://static.91haoka.cn/vant.css"/>
        <script src="https://static.91haoka.cn/vue.min.js"></script>
        <script src="https://static.91haoka.cn/vantall.js"></script>
        <script src="https://static.91haoka.cn/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://static.91haoka.cn/all.css"/>
		<script src="./js/q.js"></script>
		<script src="https://test91.91haoka.cn/html2canvas.min.js"></script>
		<script src="./js/qiniu.min.js"></script>
     </head>
    <style type="text/css">
		*{ box-sizing: border-box; font-family:'PingFang SC'; font-size: 12px;}
		img{ max-width: 100%;}
		.kflexbc{ display: flex; justify-content: space-between; align-items: center; }
		.kflexc{ display: flex; align-items: center; }
		.kflexcc{ display: flex; align-items: center; justify-content: center;}
		.kflex{ display: flex; }
		.li{color: rgb(102, 102, 102); font-size: 16px; font-weight: bold; margin-right: 0.3rem; }
		.liact{ font-size: 20px; color: rgb(30, 30, 30); font-weight: bold; background: url('http://test91.91haoka.cn/1715304099tw650481.jpg') no-repeat center;}
    </style>
	<body>
        <div id="app" style="background: #FFFFFF;" v-cloak>
           <div style="padding: 0.3rem; background: rgb(246, 250, 255);" id="content">
             <div style="background: #fff;">
               <div class="kflexcc">
                 <img :src="share_img" style="width: 100%; border-radius: 0.3rem;">
               </div>
               <div class="kflexbc" style="padding: 0.3rem;">
                 <div style="flex-grow: 1;">
                   <div style=" font-size: 12px; line-height: 0.4rem; max-height: 0.8rem; overflow: hidden;">
                     {{all.title}}
                   </div>
                   <div class="kflexc" style="margin: 10px 0;">
                     <div style="margin-right: 10px;"><img src="http://test91.91haoka.cn/1715235328uHZ50481.jpg"></div>
                     <div style="font-size: 14px;" class="kflexc">{{ruleForm.name}}</div>
                   </div>
                   <!-- <div class="kflexc" style="width: 2rem; font-size: 12px; line-height: 0.4rem; max-height: 0.8rem; margin-bottom: 10px; overflow: hidden;" :style="{color:ruleForm.share_content_color}">
                     {{ruleForm.share_content}}
                   </div> -->
                   <div style="font-size: 12px; color: #999; " class="kflexc">长按识别二维码进入下单链接</div>
                 </div>
                 <div>
                   <div ref="qrcode2" id="qrcode2" style="width: 100px;"></div>
                 </div>
               </div>
             </div>
           </div>
		   <div class="kflexcc" style="margin-top: 30px;">
		     <div @click="shengchengtupian()" style="width: 3.3rem; line-height: 0.8rem; border-radius: 20px; background: rgb(0, 90, 255); color: #fff; text-align: center; margin-right: 20px;">保存图片</div>
		     <div @click="fuzhi()" style="width: 3.3rem; line-height:  0.8rem; border-radius: 20px; background: rgb(228, 237, 255); color: rgb(0, 90, 255);; text-align: center;">复制链接</div>
		   </div>
        </div>

       
        <script>
			
            var h = document.documentElement.clientWidth / 7.5 + 'px';
                document.documentElement.style.fontSize = h;

            
            new Vue({
                el: '#app',
                data: function() {
                	return {
						ruleForm:{},
						url:"",
						apis:"/apis",
						all:"",
						share_img:"https://91haoka.cn/gth/static/img/kenan.jpg"
                	}
                },
                created(){
					if(location.host != 'localhost'){
						this.apis = ""
					}
					
					
					
					this.url = location.origin + '/webapp/merchant/templet1.html?share_id='+this.getUrlParam('shop_id')+'&id='+this.getUrlParam('id')+'&weixiaodian=true'
					
					axios.get(this.apis +'/api/plan-market/order-page/web/mini-store/info?shop_id='+this.getUrlParam('shop_id'))
						.then(response => {
							if (response.data.msg.code == 0) {
								this.ruleForm = response.data.data
								document.title = this.ruleForm.name
							} else {
								vant.Toast(response.data.msg.info);
							}
						})
						
					axios.get(this.apis + '/api/plan-market/order-page/for-web?share_id='+this.getUrlParam('shop_id')+'&order_page_id='+this.getUrlParam('id'))
						.then(response => {
							if (response.data.msg.code == 0) {
								this.all = response.data.data
								if(this.all.share_img){
									this.share_img = this.all.share_img
								}else{
									if(this.all.image1){
										this.share_img = this.all.image1
									}
								}
							} else {
								vant.Toast(response.data.msg.info);
							}
						})
                },
                mounted () {
					var qrcode = new QRCode(document.getElementById("qrcode2"), {
					    text: this.url,
					    width: 100,
					    height: 100,
					    colorDark : "#000000",
					    colorLight : "#ffffff",
					    correctLevel : QRCode.CorrectLevel.H
					});
                },
                methods:{
					fuzhi:function(text){
						
						const clipboardData = window.clipboardData;
						if (clipboardData) {
						  clipboardData.clearData();
						  clipboardData.setData("Text", this.url);
						  return true;
						} else if (document.execCommand) {
						  const el = document.createElement("textarea");
						  el.value = this.url;
						  el.setAttribute("readonly", "");
						  el.style.position = "absolute";
						  el.style.left = "-9999px";
						  document.body.appendChild(el);
						  el.select();
						  document.execCommand("copy");
						  document.body.removeChild(el);
						  vant.Toast('已复制');
						  return true;
						}
						return false;
					},
					
					shengchengtupian:function(){
					  const element2 = document.getElementById('content');
					  html2canvas(element2,{
					        useCORS: true, // 这个选项会自动处理跨域问题
					        // scale: 1,//图片清晰度，越高越清楚，图片质量越大
					        backgroundColor: null,//画出来的图片有白色的边框,不要可设置背景为透明色（null）
					  }).then(canvas => {
							let weixin = false
							
							var ua = window.navigator.userAgent.toLowerCase();
							if (ua.match(/micromessenger/i) == 'micromessenger') {
							     weixin = true
							}
							
							if(weixin){
								let img = canvas.toDataURL('image/jpeg')
								let blob = this.base64ToBlob(img)  // 转码
								this.uploadok(blob)
							}else{
								// 将图像添加到DOM中
								var a = document.createElement("a");
								        document.body.appendChild(a);
								        a.href = canvas.toDataURL('image/png');
								        a.download = "";
								        a.click();
							}
					  });
					},

					getUrlParam:function(name) {
					    var query = window.location.search.substring(1);
					    var vars = query.split("&");
					    for (var i=0;i<vars.length;i++) {
					            var pair = vars[i].split("=");
					            if(pair[0] == name){return pair[1];}
					    }
					    return(false);
					},
					
					base64ToBlob (code) {
					  let parts = code.split(';base64,');
					  let contentType = parts[0].split(':')[1];
					  let raw = window.atob(parts[1]);
					  let rawLength = raw.length;
					  let uInt8Array = new Uint8Array(rawLength);
					  for (let i = 0; i < rawLength; ++i) {
					    uInt8Array[i] = raw.charCodeAt(i);
					  }
					  return new window.Blob([uInt8Array], {type: contentType});
					},
					
					getRandomChar:function(len = 11)  {
					  var  x = "0123456789qwertyuioplkjhgfdsazxcvbnm" // 需要什么字符这里添加
					  var  tmp = ""
					  var timestamp = new Date().getTime();
					  for(var  i=0;i<len;i++)  {
					    tmp += x.charAt(Math.ceil(Math.random()*100000000)%x.length);
					  }
					  return  timestamp+tmp;
					},
					//上传文件
					uploadok: function(file,fileList) {
						
						let name = this.getRandomChar()
						
						var that = this
						axios.get(this.apis + `/api/system/qiniu/upload_token2`,{
							params:{bucket:'test91'}
						})
						.then(response => {
					      if(response.data.msg.code == 0){
					        const observer = {
					          next(res){},
					          error(err){},
					          complete(res){
								location.href = 'https://test91.91haoka.cn/'+ res.data
					          }
					        }
					        const observable = qiniu.upload(file,name,response.data.data, {}, {})
					        const subscription = observable.subscribe(observer) // 上传开始
					      }else{
							  vant.Toast(response.data.msg.info);
					      }
					    });
					},
                }
            });

  
        </script>
	</body>
</html>
